/*
 * @Author: xiaosihan 
 * @Date: 2024-01-08 23:14:31 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-20 22:19:44
 */


import { autorun } from "mobx";
import { HTMLInputTypeAttribute, ReactNode, useEffect, useRef, useState } from "react";
import styles from "./contorl.module.less";
import { InputNumber, Slider, Space, Tooltip } from "antd";
import homeStore from "../homeStore";
import { SketchPicker } from "react-color";

interface Iprops {
    children?: ReactNode
}

// 控制器
export default function Contorl() {

    const [floorNum, setFloorNum] = useState(0);
    const [windowNum, setWindowNum] = useState(0);
    const [windowColor, setWindowColor] = useState(homeStore.windowColor);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setFloorNum(0);
        setWindowNum(0);
        setWindowColor(homeStore.windowColor);
    }, { delay: 10 }), []);

    return (
        <div className={styles.contorl} >
            <div className={styles.floor_num} >
                <span className={styles.label} >楼层数 : {floorNum}</span>
                <Slider
                    min={1}
                    max={20}
                    value={floorNum}
                    className={styles.sider}
                    onChange={v => {
                        homeStore.setFloorNum(v);
                    }}
                />
            </div>

            <div className={styles.floor_num} >
                <span className={styles.label} >窗户数 : {windowNum}</span>
                <Slider
                    min={1}
                    max={8}
                    value={windowNum}
                    className={styles.sider}
                    onChange={v => {
                        homeStore.setWindowNum(v);
                    }}
                />
            </div>

            {/* 窗户颜色 */}
            <Tooltip
                title={
                    <SketchPicker
                        className={styles.SketchPicker}
                        color={windowColor}
                        onChange={(color: any) => {
                            homeStore.setWindowColor(color.hex);
                        }}

                    />
                }
                trigger={['click']}
                color={"#00000000"}
                placement="bottom"
            >
                <div
                    style={{ backgroundColor: windowColor }}
                    className={styles.colorBlock}
                >

                </div>
            </Tooltip>

        </div>
    );

}